// =================================== 配置 VueX =================================== //

// 引入Vue原型
// import Vue from "vue"

// 引入VueX
// import Vuex from 'vuex'

// 挂载VueX
// Vue.use(Vuex)

/**
 * 公共的state对象，存储所有组件的状态
 */
// let state = {
//   user: {
//       name: ""
//   }
// }

/**
* 唯一取值的方法，计算属性
*/
// let getters = {
//   // 这个 state 就是上面的公共对象
//   getUser(state) {
//       return state.user
//   }
// }

/**
* 唯一可以修改state值的方法，这里是同步阻塞的！
*/
// let mutations = {
//   // 这里的 state 是公共对象，user 表示要修改的值
//   updateUser(state, user) {
//       state.user = user
//   }
// }

/**
* 异步调用mutations的方法
*/
// let actions = {
//   // context表示上下文， user 表示要修改的值
//   asyncUpadteUser(context, user) {
//       context.commit("updateUser", user)
//   }
// }

// 向外暴露，方便引用
// export default new Vuex.Store({
//     state,
//     getters,
//     mutations,
//     actions
// })

// =================================== 引用 VueX =================================== //

// 1.到main.js中进行引用下面是示例代码
// import Vuex from "vuex"
// Vue.use(Vuex)
// 引入刚刚配置的 store 文件
// import store from "xxxxxx"

// 2.挂载引用
// new Vue({
//     el:"#app",
//     store
// })

// =================================== 使用 VueX =================================== //

// 1.存入数据
// this.$store.dispatch("action方法名", 参数)

// 2.取出数据
// this.$store.getters.getUser

// =================================== 解决Vuex刷新丢失 =================================== //
// App.vue 监听页面是否刷新，如果刷新了就将 state 存入到 sessionStorage 中，之后判断 sessionStorage 中
// 是否有 state 对象，如果有说明页面被刷新了，之后将 sessionStorage 中的值取出在，再赋值给 state，
// 如果不存在，说明是第一次打开，直接取 vuex 中定义的 state 初始值

// 钩子函数
// export default {
//   name: "App",
//   mounted() {
//       // 创建监听事件
//       window.addEventListener("unload", this.saveState)
//   },
//   methods: {
//       saveState() {
//           // 将 state 存入到 sessionStorage 中
//           sessionStorage.setItem("state", JSON.stringify(this.$store.state))
//       }
//   }
// }

// 上面配置 state 可以修改成以下配置
// state = null != window.sessionStorage.getItem("state") ? window.sessionStorage.getItem("state") : {
//   user: {
//       name: "",
//   }
// }

// =================================== VueX 模块化 =================================== //
// 1.将模块分割为 xxx.js 文件
// const user = {
//   state: {},
//   getters:{},
//   mutations:{},
//   actions:{}
// }

// 2.将模块进行抛出
// export default user;